<template>
  <div class="mainConfig">
    <div class="mainButton">
      <Button @click="changeClass">配置类别</Button>
      <Button @click="changeService">配置服务</Button>
    </div>
    <div class="serviceClass" v-show="configClass">
      <configTree></configTree>
      <serviceItems
        @contentState="getState"
        v-show="!serviceItemContentState"
      ></serviceItems>
      <serviceItemView
        v-if="serviceItemContentState"
        @itemViewState="getItemState"
      ></serviceItemView>
    </div>
    <div class="serviceConfig" v-if="configToggle">
      <popupConfig></popupConfig>
    </div>
  </div>
</template>
<script>
import configTree from "../components/OnemapConfig/ConfigTree";
import serviceItems from "../components/OnemapConfig/ServiceItems";
import popupConfig from "../components/OnemapConfig/PopupConfig";
import serviceItemView from "../components/OnemapConfig/ServiceItemView";
export default {
  data() {
    return {
      configClass: true,
      configToggle: false,
      serviceItemContentState: false
    };
  },
  components: {
    configTree,
    serviceItems,
    popupConfig,
    serviceItemView
  },
  methods: {
    changeClass() {
      this.configClass = true;
      this.configToggle = false;
    },
    changeService() {
      this.configToggle = true;
      this.configClass = false;
    },
    getState(data) {
      this.serviceItemContentState = data;
    },
    getItemState(data) {
      this.serviceItemContentState = data;
    }
  }
};
</script>
<style scoped>
.mainConfig {
  width: 100%;
  height: 100%;
}
.mainButton {
  width: 100%;
  height: 40px;
  margin-top: 30px;
}
.mainButton button {
  width: 86px;
  height: 32px;
  margin-right: 10px;
}
.serviceClass,
.serviceConfig {
  width: 100%;
  height: calc(100% - 40px);
  padding-top: 10px;
}
</style>
